<template>
	<a-modal :width="650" :bodyStyle="{padding: 0}" centered :visible="visible" :mask-closable="false" title="文字校准" @cancel="handleClose" @ok="handleSubmit">
		<div class="recognize_con" style="padding: 10px; max-height: 400px;">
			<div class="recognize_item" v-for="(item, index) in recognizeText" :key="index">
				<div class="recocgnize_time">{{index == 0?'视频标题':'字幕'+index}}</div>
				<!-- <div class="recocgnize_text" contenteditable="true" v-html="recognizeText[index].newText" @focus="value=>handleBlur(value, index)" @blur="value=>handleBlur(value, index)"></div> -->
				<a-input v-model:value="recognizeText[index].newText" style="width: 100%; margin-left: 10px;" />
			</div>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		nextTick,
		computed,
		watch,
		onMounted
	} from "vue";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		setup(props, context) {
			
			const state = reactive({
				recognizeText: []
			})
			
			const handleClose = () => {
				context.emit('close')
			}
			
			const handleSubmit = () => {
				let ai_data = {}
				if(state.recognizeText?.length){
					ai_data.title = state.recognizeText[0]
					let arr = state.recognizeText.filter((item, index)=>index!=0)
					ai_data.subtitle = arr
				}
				context.emit('close', ai_data)
			}
			
			watch(()=>props.visible, val=> {
				if(val && props?.item?.ai_data){
					state.recognizeText = []
					state.recognizeText.unshift(props?.item?.ai_data?.title)
					state.recognizeText = [...state.recognizeText, ...props?.item?.ai_data?.subtitle]
				}
			})

			return {
				handleClose,
				handleSubmit,
				...toRefs(state),
			};
		},
	});
</script>

<style lang="less" scoped>
	[contenteditable]:focus {
		outline: none;
		color: #0075ff;
	}
	.recognize_con{
		overflow-y: scroll;
		max-height: 500px;
		&::-webkit-scrollbar {
		  width: 6px;
		}
		
		&::-webkit-scrollbar-track {
		  width: 5px;
		  background-color: transparent;
		  -webkit-border-radius: 4px;
		  -moz-border-radius: 4px;
		  border-radius: 4px;
		}
		
		&::-webkit-scrollbar-thumb {
		  background-color: rgba(193, 193, 193, 0.5);
		  background-clip: padding-box;
		  min-height: 28px;
		  -webkit-border-radius: 4px;
		  -moz-border-radius: 4px;
		  border-radius: 4px;
		}
		.audio_item{
			width: 100% !important;
			height: 55px !important;
		}
		
		.recognize_item{
			display: flex;
			align-items: center;
			margin-top: 20px;
			.recocgnize_time{
				width: 70px;
				text-align: right;
				flex-shrink: 0;
				color: #000;
			}
			.recocgnize_text{
				margin-left: 20px;
				display: flex;
				align-items: center;
				border: none;
			}
		}
	}
</style>